<template>
  <view class="workspace-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="store-info">
          <image class="store-logo" src="/static/logo.png" mode="aspectFill"></image>
          <view class="store-details">
            <text class="header-title">{{ currentStoreName }}</text>
            <view class="store-status-switcher">
              <uni-tag :text="currentStoreStatus.text" :type="currentStoreStatus.type" size="small" :circle="true"></uni-tag>
              <view class="enhanced-switch-btn" @click="handleSwitchStore">
                <view class="switch-icon">
                  <uni-icons type="loop" size="14" color="#fff"></uni-icons>
                </view>
                <text>切换门店</text>
                <view class="switch-arrow">
                  <uni-icons type="down" size="12" color="#fff"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="header-actions">
          <uni-icons type="settings" size="20" color="#fff" @click="showSettingsMenu" />
        </view>
      </view>
    </view>

    <!-- 今日数据概览卡片 -->
    <view class="overview-section">
      <view class="overview-card">
        <view class="overview-item">
          <text class="overview-value">{{ ((statistics.todayAmount || 0) / 100).toFixed(2) }}</text>
          <text class="overview-label">今日支付金额(元)</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">{{ statistics.todayOrders || 0 }}</text>
          <text class="overview-label">今日下单数量</text>
        </view>
        <view class="overview-item">
          <text class="overview-value">{{ ((statistics.todayAmount || 0) / 100).toFixed(2) }}</text>
          <text class="overview-label">今日实际收入</text>
        </view>
      </view>
    </view>

    <!-- 数据统计详情 -->
    <view class="stats-section">
      <view class="section-header">
        <text class="section-title">数据统计</text>
        <view class="refresh-btn" @click="refreshStatistics">
          <uni-icons type="refresh" size="16" color="#1890FF" />
        </view>
      </view>
      <view class="stats-card">
        <view class="stats-tabs">
          <view 
            v-for="(tab, index) in statsTabs" 
            :key="index" 
            :class="['tab-item', { active: currentStatsTab === index }]" 
            @click="switchStatsTab(index)"
          >
            <text>{{ tab }}</text>
            <view v-if="currentStatsTab === index" class="tab-indicator"></view>
          </view>
        </view>
        <view class="stats-summary">
          <view class="summary-item">
            <text class="summary-label">累计流水</text>
            <text class="summary-amount">¥{{ ((statistics.totalRevenue || 0) / 100).toFixed(2) }}</text>
          </view>
          <view class="summary-divider"></view>
          <view class="summary-item">
            <text class="summary-label">实际收入</text>
            <text class="summary-amount">¥{{ ((statistics.totalRevenue || 0) / 100).toFixed(2) }}</text>
          </view>
        </view>
        <view class="stats-grid">
          <view 
            class="stats-grid-item" 
            v-for="(item, index) in detailedStats" 
            :key="index"
            :class="{ 'stats-item-animate': isStatsUpdating }"
          >
            <view class="stats-icon">
              <uni-icons :type="getStatsIcon(item.label)" size="20" :color="getStatsColor(item.label)" />
            </view>
            <text class="stats-label">{{ item.label }}</text>
            <text class="stats-value">{{ item.value }}</text>
            <text class="stats-sub-value">{{ item.subValue }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单管理模块 -->
    <view class="order-section">
      <text class="section-title">订单管理</text>
      <view class="order-stats-card">
        <view class="order-stats-grid">
          <view class="order-stats-item" v-for="(item, index) in orderManagementStats" :key="index">
            <text class="order-stats-label">{{ item.label }}</text>
            <text class="order-stats-value">{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 常用功能模块 -->
    <view class="modules-section">
      <text class="section-title">常用功能</text>
      <view class="modules-grid">
        <view 
          class="module-card" 
          @click="navigateToStores"
        >
          <view class="module-icon">
            <uni-icons type="map" size="32" color="#52C41A" />
          </view>
          <text class="module-title">门店管理</text>
          <text class="module-desc">门店信息</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToVenues"
        >
          <view class="module-icon">
            <uni-icons type="map" size="32" color="#52C41A" />
          </view>
          <text class="module-title">场地管理</text>
          <text class="module-desc">场地信息</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToOrders"
        >
          <view class="module-icon">
            <uni-icons type="list" size="32" color="#FA8C16" />
          </view>
          <text class="module-title">订单管理</text>
          <text class="module-desc">订单查看</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToMembers"
        >
          <view class="module-icon">
            <uni-icons type="person" size="32" color="#722ED1" />
          </view>
          <text class="module-title">会员管理</text>
          <text class="module-desc">会员信息</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToGroupons"
        >
          <view class="module-icon">
            <uni-icons type="gift" size="32" color="#1890FF" />
          </view>
          <text class="module-title">团购管理</text>
          <text class="module-desc">团购活动</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToCoupons"
        >
          <view class="module-icon">
            <uni-icons type="paperplane" size="32" color="#F5222D" />
          </view>
          <text class="module-title">优惠券</text>
          <text class="module-desc">券码管理</text>
        </view>
        <view 
          class="module-card" 
          @click="navigateToHelp"
        >
          <view class="module-icon">
            <uni-icons type="help" size="32" color="#13C2C2" />
          </view>
          <text class="module-title">帮助中心</text>
          <text class="module-desc">使用帮助</text>
        </view>
      </view>
    </view>

    <!-- 设置功能弹窗 -->
    <view v-if="showSettings" class="settings-overlay" @click="hideSettingsMenu">
      <view class="settings-popup" :style="{ top: settingsPopupTop + 'px' }" @click.stop>
        <view class="settings-item" @click="handleSwitchStoreFromMenu">
          <uni-icons type="loop" size="18" color="#666" />
          <text>切换门店</text>
        </view>
        <view class="settings-item" @click="navigateToProfile">
          <uni-icons type="person" size="18" color="#666" />
          <text>个人资料</text>
        </view>
        <view class="settings-item" @click="navigateToSystemSettings">
          <uni-icons type="gear" size="18" color="#666" />
          <text>系统设置</text>
        </view>
        <view class="settings-item" @click="handleLogout">
          <uni-icons type="closeempty" size="18" color="#f5222d" />
          <text style="color: #f5222d;">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { useAppStore } from '@/stores/app';
import { fetchStatistics, fetchOrderStats } from '@/api/statistics';
import { fetchVenuesByStore } from '@/api/store';
import type { StatisticsOverview } from '@/types/statistics';
import type { Venue } from '@/types/store';
import { onShow } from '@dcloudio/uni-app';

const statusBarHeight = ref(0);
const appStore = useAppStore();

const statistics = ref<Partial<StatisticsOverview>>({});
const venueList = ref<Venue[]>([]);

const statsTabs = ['今日', '昨日', '近7天', '本月', '全部'];
const currentStatsTab = ref(0);

// 设置弹窗相关状态
const showSettings = ref(false);
const settingsPopupTop = ref(0);

// 数据更新动画状态
const isStatsUpdating = ref(false);

const currentStoreName = computed(() => appStore.currentStore?.name || '加载中...');
const currentStoreStatus = computed(() => {
  if (!appStore.currentStore) return { text: '未知', type: 'info' };
  const status = appStore.currentStore.status;
  if (status === 2) return { text: '已打烊', type: 'error' };
  if (status === 1) return { text: '试营业', type: 'success' };
  return { text: '筹备中', type: 'warning' };
});

const detailedStats = ref([
  { label: '微信支付', value: '0', subValue: '退款: 0' },
  { label: '美团团购', value: '0', subValue: '退款: 0' },
  { label: '抖音团购', value: '0', subValue: '退款: 0' },
  { label: '余额支付', value: '0', subValue: '退款: 0' },
  { label: '用户充值', value: '0', subValue: '次数: 0' },
  { label: '用户注册', value: '0', subValue: '' },
]);

const orderManagementStats = ref([
    { label: '全部', value: '0' },
    { label: '待付款', value: '0' },
    { label: '待消费', value: '0' },
    { label: '消费中', value: '0' },
    { label: '已完成', value: '0' },
    { label: '已取消', value: '0' },
    { label: '续费订单', value: '0' },
    { label: '退款订单', value: '0' },
]);

// 计算弹窗位置，确保不被遮挡
const calculatePopupPosition = () => {
  const systemInfo = uni.getSystemInfoSync();
  const screenHeight = systemInfo.screenHeight;
  const popupHeight = 240; // 弹窗预估高度
  const headerHeight = statusBarHeight.value + 88; // 导航栏高度
  
  // 计算弹窗顶部位置，确保完整显示
  let top = headerHeight + 20;
  if (top + popupHeight > screenHeight - 100) {
    top = screenHeight - popupHeight - 100;
  }
  
  settingsPopupTop.value = top;
};

// 显示设置菜单
const showSettingsMenu = () => {
  calculatePopupPosition();
  showSettings.value = true;
};

// 隐藏设置菜单
const hideSettingsMenu = () => {
  showSettings.value = false;
};

// 从菜单中切换门店
const handleSwitchStoreFromMenu = () => {
  hideSettingsMenu();
  handleSwitchStore();
};

// 导航到个人资料
const navigateToProfile = () => {
  hideSettingsMenu();
  uni.showToast({
    title: '个人资料功能开发中',
    icon: 'none'
  });
};

// 导航到系统设置
const navigateToSystemSettings = () => {
  hideSettingsMenu();
  uni.showToast({
    title: '系统设置功能开发中',
    icon: 'none'
  });
};

// 刷新统计数据
const refreshStatistics = async () => {
  if (!appStore.currentStoreId) return;
  isStatsUpdating.value = true;
  try {
    await getStatisticsData(appStore.currentStoreId);
    uni.showToast({
      title: '数据已刷新',
      icon: 'success',
      duration: 1500
    });
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'none'
    });
  } finally {
    setTimeout(() => {
      isStatsUpdating.value = false;
    }, 500);
  }
};

// 切换统计标签页
const switchStatsTab = (index: number) => {
  if (currentStatsTab.value === index) return;
  currentStatsTab.value = index;
  // 这里可以根据不同的标签页加载不同时间段的数据
  refreshStatistics();
};

// 获取统计项图标
const getStatsIcon = (label: string) => {
  const iconMap: Record<string, string> = {
    '微信支付': 'wallet',
    '美团团购': 'gift',
    '抖音团购': 'videocam',
    '余额支付': 'wallet-filled',
    '用户充值': 'plus',
    '用户注册': 'person-add'
  };
  return iconMap[label] || 'circle';
};

// 获取统计项颜色
const getStatsColor = (label: string) => {
  const colorMap: Record<string, string> = {
    '微信支付': '#52C41A',
    '美团团购': '#FA8C16',
    '抖音团购': '#F5222D',
    '余额支付': '#1890FF',
    '用户充值': '#722ED1',
    '用户注册': '#13C2C2'
  };
  return colorMap[label] || '#666';
};

// 处理退出登录
const handleLogout = () => {
  hideSettingsMenu();
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        try {
          // 清除用户数据
          if (typeof appStore.logout === 'function') {
            appStore.logout();
          } else {
            // 如果没有logout方法，使用store的方法来清除数据
            if (typeof appStore.setCurrentStoreId === 'function') {
              appStore.setCurrentStoreId(null);
            }
            if (typeof appStore.clearStores === 'function') {
              appStore.clearStores();
            }
            // 清除本地存储
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            uni.removeStorageSync('currentStoreId');
          }
        } catch (error) {
          console.error('退出登录时清除数据失败:', error);
          // 即使清除数据失败，也要清除本地存储
          uni.removeStorageSync('token');
          uni.removeStorageSync('userInfo');
          uni.removeStorageSync('currentStoreId');
        }
        
        // 由于没有登录页面，显示退出成功提示并刷新当前页面
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
          duration: 2000
        });
        
        // 延迟跳转到登录页面，让用户看到提示
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/index'
          });
        }, 2000);
      }
    }
  });
};

const resetStats = () => {
    statistics.value = {};
    detailedStats.value.forEach(stat => {
        stat.value = '0';
        if (stat.subValue) stat.subValue = stat.subValue.replace(/:.*/, ': 0');
    });
    orderManagementStats.value.forEach(stat => stat.value = '0');
};

const getStatisticsData = async (storeId?: number | null) => {
  if (!storeId) return;
  resetStats();
  try {
    const [statsRes, orderStatsRes] = await Promise.all([
      fetchStatistics(storeId),
      fetchOrderStats(storeId),
    ]);

    if (statsRes) {
      statistics.value = statsRes;
      const allOrders = orderManagementStats.value.find(s => s.label === '全部');
      if (allOrders) allOrders.value = String(statsRes.orderCount || 0);
    }

    if (orderStatsRes && orderStatsRes.paymentTypeData) {
      const paymentTypeMap: Record<number, string> = { 1: '微信支付', 3: '余额支付' };
      orderStatsRes.paymentTypeData.forEach(p => {
          const label = paymentTypeMap[p.payment_type];
          if (label) {
              const stat = detailedStats.value.find(s => s.label === label);
              if (stat) stat.value = String(p.count);
          }
      });

      const statusMap = new Map<number, number>();
      if (orderStatsRes.statusData) {
        orderStatsRes.statusData.forEach(s => statusMap.set(s.status, s.count));
      }

      const statusMapping: Record<string, number> = {
          '待付款': 1, '待消费': 2, '已完成': 3, '已取消': 4, '退款订单': 5,
      };

      orderManagementStats.value.forEach(stat => {
          const status = statusMapping[stat.label];
          if (status) {
            stat.value = String(statusMap.get(status) || 0);
          }
      });
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

// 获取场地列表
const getVenueList = async (storeId?: number | null) => {
  if (!storeId) return;
  try {
    const res = await fetchVenuesByStore(storeId);
    venueList.value = res.list.slice(0, 3); // 只显示前3个场地
  } catch (error) {
    console.error('获取场地列表失败:', error);
  }
};

const handleSwitchStore = () => {
  if (appStore.stores.length === 0) {
    uni.showToast({ title: '暂无门店可切换', icon: 'none' });
    return;
  }
  const storeNames = appStore.stores.map(s => s.name);
  uni.showActionSheet({
    itemList: storeNames,
    success: (res) => {
      const selectedStore = appStore.stores[res.tapIndex];
      if (selectedStore && selectedStore.id !== appStore.currentStoreId) {
        appStore.setCurrentStoreId(selectedStore.id);
      }
    },
  });
};

// 获取场地状态文本
const getStatusText = (status: number) => {
  const statusMap: Record<number, string> = {
    1: '空闲中',
    2: '使用中',
    3: '保洁中',
    4: '待保洁',
    5: '维护中'
  };
  return statusMap[status] || '未知状态';
};

// 获取场地状态类型
const getStatusType = (status: number) => {
  const typeMap: Record<number, string> = {
    1: 'success',
    2: 'primary',
    3: 'warning',
    4: 'warning',
    5: 'error'
  };
  return typeMap[status] || 'default';
};

// 获取场地第一张图片
const getFirstImage = (images?: string) => {
  if (!images) return '/static/images/venue-placeholder.png';
  try {
    const imageArray = JSON.parse(images);
    return imageArray[0] || '/static/images/venue-placeholder.png';
  } catch (e) {
    return images || '/static/images/venue-placeholder.png';
  }
};

// 导航函数
const navigateToStores = () => {
  uni.navigateTo({
    url: '/pages/stores/index'
  });
};

const navigateToVenues = () => {
  uni.switchTab({
    url: '/pages/venues/index'
  });
};

const navigateToOrders = () => {
  uni.switchTab({
    url: '/pages/orders/index'
  });
};

const navigateToMembers = () => {
  uni.switchTab({
    url: '/pages/members/index'
  });
};

const navigateToGroupons = () => {
uni.navigateTo({
    url: '/pages/groupons/index'
  });
};

const navigateToCoupons = () => {
  uni.navigateTo({
    url: '/pages/coupons/index'
  });
};

const navigateToSettings = () => {
  uni.showToast({
    title: '设置功能开发中',
    icon: 'none'
  });
};

const navigateToHelp = () => {
  uni.showToast({
    title: '帮助功能开发中',
    icon: 'none'
  });
};

watch(() => appStore.currentStoreId, (newStoreId) => {
  if (newStoreId) {
    getStatisticsData(newStoreId);
    getVenueList(newStoreId);
  }
}, { immediate: true });

onMounted(() => {
  statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight || 44;
});

onShow(() => {
  appStore.getAllStores();
  if (appStore.currentStoreId) {
    getVenueList(appStore.currentStoreId);
  }
});
</script>

<style lang="scss" scoped>
.workspace-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #1890FF 0%, #F0F9FF 30%);
}

.header {
  background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx;
    
    .store-info {
      display: flex;
      align-items: center;
      flex: 1;
    }
    
    .store-logo {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
      margin-right: 20rpx;
    }
    
    .store-details {
      display: flex;
      flex-direction: column;
    }
    
    .header-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
    }
    
    .store-status-switcher {
      display: flex;
      align-items: center;
      gap: 20rpx;
    }
    
    .enhanced-switch-btn {
      display: flex;
      align-items: center;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.15) 100%);
      padding: 10rpx 20rpx;
      border-radius: 32rpx;
      font-size: 24rpx;
      backdrop-filter: blur(10rpx);
      border: 1rpx solid rgba(255, 255, 255, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.95);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.25) 100%);
      }
      
      .switch-icon {
        margin-right: 8rpx;
        animation: rotate 2s linear infinite;
      }
      
      text {
        color: #fff;
        font-weight: 500;
        margin: 0 8rpx;
      }
      
      .switch-arrow {
        transition: transform 0.3s ease;
      }
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
  }
}

.overview-section {
  margin: -40rpx 32rpx 32rpx;
  
  .overview-card {
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(24, 144, 255, 0.1);
    
    .overview-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .overview-value {
        font-size: 32rpx;
        font-weight: 600;
        color: #1890FF;
        margin-bottom: 8rpx;
      }
      
      .overview-label {
        font-size: 24rpx;
        color: #666;
        text-align: center;
      }
    }
  }
}

.stats-section {
  padding: 0 32rpx 32rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .refresh-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60rpx;
      height: 60rpx;
      background: linear-gradient(135deg, #E6F7FF 0%, #BAE7FF 100%);
      border-radius: 50%;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.9) rotate(180deg);
        background: linear-gradient(135deg, #BAE7FF 0%, #91D5FF 100%);
      }
    }
  }
  
  .stats-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.08);
    border: 1rpx solid rgba(24, 144, 255, 0.05);
    
    .stats-tabs {
      display: flex;
      background: #F8FAFF;
      border-radius: 16rpx;
      padding: 8rpx;
      margin-bottom: 32rpx;
      position: relative;
      
      .tab-item {
        position: relative;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16rpx 8rpx;
        border-radius: 12rpx;
        font-size: 26rpx;
        color: #666;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        
        text {
          position: relative;
          z-index: 2;
          transition: all 0.3s ease;
        }
        
        .tab-indicator {
          position: absolute;
          bottom: 4rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 24rpx;
          height: 6rpx;
          background: linear-gradient(90deg, #1890FF 0%, #40A9FF 100%);
          border-radius: 3rpx;
          animation: slideIn 0.3s ease;
        }
        
        &.active {
          background: #fff;
          color: #1890FF;
          font-weight: 600;
          box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.15);
          transform: translateY(-2rpx);
          
          text {
            color: #1890FF;
          }
        }
      }
    }
    
    .stats-summary {
      display: flex;
      background: linear-gradient(135deg, #F0F9FF 0%, #E6F7FF 100%);
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 32rpx;
      position: relative;
      overflow: hidden;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2rpx;
        background: linear-gradient(90deg, #1890FF 0%, #40A9FF 100%);
      }
      
      .summary-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .summary-label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 12rpx;
        }
        
        .summary-amount {
          font-size: 36rpx;
          font-weight: 700;
          color: #1890FF;
          text-shadow: 0 2rpx 4rpx rgba(24, 144, 255, 0.2);
        }
      }
      
      .summary-divider {
        width: 2rpx;
        background: linear-gradient(180deg, transparent 0%, #1890FF 50%, transparent 100%);
        margin: 0 32rpx;
      }
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32rpx;
      
      .stats-grid-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24rpx 16rpx;
        background: #FAFBFF;
        border-radius: 16rpx;
        border: 1rpx solid #F0F2F5;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 3rpx;
          background: linear-gradient(90deg, transparent 0%, #1890FF 50%, transparent 100%);
          transform: translateX(-100%);
          transition: transform 0.6s ease;
        }
        
        &:hover::before,
        &.stats-item-animate::before {
          transform: translateX(0);
        }
        
        &.stats-item-animate {
          animation: statsItemPulse 0.6s ease;
        }
        
        .stats-icon {
          margin-bottom: 12rpx;
          padding: 16rpx;
          background: rgba(24, 144, 255, 0.1);
          border-radius: 50%;
          transition: all 0.3s ease;
        }
        
        .stats-label {
          font-size: 22rpx;
          color: #666;
          margin-bottom: 8rpx;
          font-weight: 500;
        }
        
        .stats-value {
          font-size: 28rpx;
          font-weight: 700;
          color: #1890FF;
          margin-bottom: 4rpx;
          text-shadow: 0 1rpx 2rpx rgba(24, 144, 255, 0.1);
        }
        
        .stats-sub-value {
          font-size: 20rpx;
          color: #999;
        }
        
        &:active {
          transform: scale(0.98);
          box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.15);
          
          .stats-icon {
            background: rgba(24, 144, 255, 0.2);
            transform: scale(1.1);
          }
        }
      }
    }
  }
}

.order-section {
  padding: 0 32rpx 32rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .order-stats-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
    
    .order-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24rpx;
      
      .order-stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        
        .order-stats-label {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 8rpx;
        }
        
        .order-stats-value {
          font-size: 28rpx;
          font-weight: 600;
          color: #1890FF;
        }
      }
    }
  }
}

.modules-section {
  padding: 0 32rpx 32rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;
    
    .module-card {
      position: relative;
      background: #fff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
        box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
      }
      
      .module-icon {
        margin-bottom: 16rpx;
      }
      
      .module-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }
      
      .module-desc {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

// 设置弹窗样式
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

.settings-popup {
  position: absolute;
  right: 32rpx;
  width: 320rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: slideInRight 0.3s ease;
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 32rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s ease;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f5f5f5;
  }
  
  text {
    margin-left: 24rpx;
    font-size: 28rpx;
    color: #333;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-50%) scaleX(0);
  }
  to {
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes statsItemPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.1);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.1);
  }
}
</style>